<template>
  <div class="app-container">
    <div class="customContainer">
      <div class="title">{{title}}</div>
      <purchase-links :lineData="pLinks"></purchase-links>
      <div class="order_title">
        <span>订单信息</span>
        <div>
           <router-link style="margin-right:10px"
            :to="{name:'operation/category_order_indicator',params:{row:{store_name:info.receiver_store,store_id:info.store_id},global,routerflag:true}}">
            <el-button type="primary" size="mini">预估订货明细</el-button>
          </router-link>
          <router-link
            :to="{name:'warehouse/poDetail',params :{routerflag:1,id,type:info.type,order_id:info.order_id,type_num:info.gift_type_num,num:info.gift_num,money:info.all_money}}">
            <el-button type="primary" size="mini">订单明细</el-button>
          </router-link>
        </div>
      </div>
      <div class="order_info bor_bot_n">
        <el-row>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">采购单号：</div>
              <div>{{info.order_id}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单时间：</div>
              <div>{{info.create_time}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单人：</div>
              <div>{{info.order_user}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单类型：</div>
              <div>{{info.order_type}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">采购渠道：</div>
              <div>{{info.type}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单种类：</div>
              <div>{{info.old_gift_type_num}} (种)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单数量：</div>
              <div>{{info.old_gift_num}} (个)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单金额：</div>
              <div>{{info.old_all_money|keepTwoNum}} (元)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">当前种类：</div>
              <div>{{info.gift_type_num}} (种)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">当前数量：</div>
              <div>{{info.gift_num}} (个)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">当前金额：</div>
              <div>{{info.all_money|keepTwoNum}} (元)</div>
            </div>
          </el-col>
           <el-col :span="8">
            <div class="info_item">
              <div class="tag">预估订货金额：</div>
              <div>{{info.forecast_money|keepTwoNum}}(元)</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag" :class="{danger:info.ratio>110}">累计订货金额及比例：</div>
              <div :class="{danger:info.ratio>110}">{{info.cumulative_money|keepTwoNum}} / {{info.ratio|keepTwoNum}}%</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div :class="{danger:info.ratio>110}" class="tag">预估订货差额：</div>
              <div :class="{danger:info.ratio>110}">{{info.diff|keepTwoNum}}(元)</div>
            </div>
          </el-col>
        </el-row>
        <div class="info_bot">
          <div class="tag">订单备注：</div>
          <div class="remark">
            <div v-show="info.gift_remark" style="margin-bottom:15px">{{info.gift_remark}}</div>
            <div v-show="info.order_remark">{{info.order_remark}}</div>
          </div>
        </div>
      </div>
      <div class="order_title">收货信息</div>
      <div class="rece_info bor_bot_n">
        <el-row>
          <el-col :span="8">
            <div class="info_item store info_bot">
              <div class="tag">收货门店：</div>
              <div class="remark">{{info.receiver_store}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货仓：</div>
              <div>{{info.house_name}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货人：</div>
              <div>{{info.receive_man}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货人手机：</div>
              <div>{{info.phone}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">地区：</div>
              <div>{{info.prov_name}} / {{info.city_name}} / {{info.dist_name}}</div>
            </div>
          </el-col>
        </el-row>
        <div class="info_bot">
          <div class="tag">地址：</div>
          <div class="remark">
            <div>{{info.address}}</div>
          </div>
        </div>
      </div>
      <div class="order_title">最近操作</div>
      <div class="action_info">
        <div class="info_bot" style="margin-left:23px">{{info.last_operation.time}} {{info.last_operation.nick}}
          {{info.last_operation.status|orderStatus(isStore)}}</div>
        <div v-show="info.last_operation.remark" style="margin-top:10px" class="info_bot">
          <div class="tag">审批意见：</div>
          <div class="remark big">{{info.last_operation.remark}}</div>
        </div>
      </div>
      <div v-if="!isLook" class="order_title bor_top_n">审批意见</div>
      <div v-if="!isLook" style="margin-bottom:30px">
        <el-form :rules="rules" ref="saveData" :model="saveData" size="small">
          <el-form-item prop="remark">
            <el-input type="textarea" :rows="5" placeholder="请输入审批意见，不超过200字" :maxlength="200" v-model="saveData.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 自定义底部 -->
    <div v-if="!isLook" class="bottom_box">
      <div class="pull-right">
        <el-button @click="setClick(3)" type="primary" size="small">关闭</el-button>
        <el-button @click="setClick(1)" type="primary" size="small">打回</el-button>
        <el-button @click="setClick(2)" type="primary" size="small">审批通过</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getInfo, setOrder } from '@/api/warehouse/poInfo';
import { getBuyOrderLines } from '@/utils';
import { getIndicators } from "@/api/common/commonApi";
export default {
  data() {
    const vRemark = (rule, value, callback) => {
      if ((this.saveData.i!=1&&this.saveData.i!=2)&&!value) {
        callback(new Error('请输入审批意见'))
      } else {
          callback()
      }
    }
    return {
      isLook: true,
      title: '采购单详情',
      info: { last_operation: {} },
      pLinks: [],
      id: '',
      isStore: false,
      formInline: {
        id: '',
        status: '',
        type: ''
      },
      global:{starttime:''},
      route: { name: 'warehouse/poInfo' },
      saveData: { remark: '' , i: ''},
      rules: {
        remark: [{ required: true, validator: vRemark, trigger: 'blur' }]
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (vm.$route.params.routerflag) {
        vm.isLook = vm.$route.params.routerflag == 1 ? false : true;
        vm.title = vm.$route.params.routerflag == 1 ? '采购单审批' : '采购单详情';
        vm.formInline.id = vm.$route.params.id;
        vm.formInline.type = vm.$route.params.type == '供应商' ? 1 : 2;
        vm.formInline.status = vm.$route.params.status == '门店下单' ? 1 : 3;
        vm.fatchData();
        vm.$refs['saveData'] && vm.$refs['saveData'].resetFields();
      }
    });
  },
  methods: {
    //设置
    setClick(type) {
      this.saveData.i=type;
      let text = type == 1 ? '确定打回？' : type == 2 ? '确定通过？' : '确定关闭？';
      this.$refs['saveData'].validate(valid => {
        if (valid) {
          this.$confirm(text, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            setOrder({
              id: this.info.id,
              buy_type: this.formInline.type,
              remark: this.saveData.remark?this.saveData.remark:type==1?"打回":"审批通过",
              type,
              time: new Date(this.info.last_operation.time).getTime() / 1000
            })
              .then(res => {
                if (res.code == 1) {
                  this.$message.success(res.message);
                  this.$store.dispatch('delVisitedViews', this.route).then(() => {
                    this.$router.push({ name: 'warehouse/storeManagerCheck', params: { routerflag: 1 } });
                  });
                }
              })
              .catch(res => {
                this.$store.dispatch('delVisitedViews', this.route).then(() => {
                  this.$router.push({ name: 'warehouse/storeManagerCheck', params: { routerflag: 1 } });
                });
              });
          });
        }
      });
    },
    fatchData() {
      this.id = '';
      this.info = { last_operation: {} };
      this.pLinks = [];
      getInfo(this.formInline).then(res => {
        if (res.code == 1) {
          this.id = this.formInline.id;
          res.message.forecast_money=0;
          res.message.cumulative_money=0;
          res.message.ratio=0;
          res.message.diff=0;
          this.info = res.message;
          this.info.old_all_money /= 100;
          this.info.forecast_money=this.info.forecast_money?this.info.forecast_money/1:0;
          this.info.cumulative_money=this.info.cumulative_money?this.info.cumulative_money/1:0;
          this.info.ratio=this.info.forecast_money?(this.info.cumulative_money/this.info.forecast_money)*100:0;
          this.info.diff=this.info.forecast_money?this.info.cumulative_money-this.info.forecast_money:0;
          this.isStore = res.message.order_type == '总部统配' || res.message.order_type == '总部下单' ? false : true;
          if (res.message.last_operation.status != 10) {
            this.isLook = true;
            this.title = '采购单详情';
          }
          if (res.message.order_type == '总部统配') {
            this.pLinks = getBuyOrderLines(res.message.last_operation.status,this.info.is_coo,this.info.is_gm, 1);
          } else {
            this.pLinks = getBuyOrderLines(res.message.last_operation.status,this.info.is_coo,this.info.is_gm);
          }
          let date=this.info.create_time.split(" ")[0];
          this.global.starttime=new Date(Date.UTC(new Date(date).getFullYear(), new Date(date).getDate()<9?new Date(date).getMonth():new Date(date).getMonth()+1)).toISOString().slice(0, 7);
          getIndicators({store_id:this.info.store_id,datetime:this.global.starttime}).then(response=>{
            if(response.code==1){
              this.info.forecast_money=response.data.forecast_money?response.data.forecast_money/1:0;
              this.info.cumulative_money=response.data.cumulative_money?response.data.cumulative_money/1:0;
              this.info.ratio=response.data.forecast_money/1>0?(response.data.cumulative_money/response.data.forecast_money)*100:200;
              this.info.diff=response.data.cumulative_money-response.data.forecast_money;
            }
          })
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.customContainer {
  overflow-y: auto;
}
.title {
  font-size: 20px;
  font-weight: bold;
}
.order_info,
.rece_info,
.action_info {
  background: #fff;
  padding: 20px 5px;
  border: 1px solid #dcdfe6;
  .info_item {
    display: inline-block;
    width: 400px;
    margin-bottom: 20px;
    div {
      display: inline-block;
      color: #333;
    }
    .tag {
      width: 180px;
      color: #838383;
      text-align: right;
      margin-right: 10px;
    }
    .store {
      position: relative;
      .name {
        position: relative;
        top: 0px;
        left: 0px;
      }
    }
  }
  .info_bot {
    color: #333;
    div.remark {
      display: inline-block;
      width: calc(100% - 230px);
      div {
        word-wrap: break-word;
      }
    }
    div.remark.big {
      min-height: 70px;
    }
    div {
      color: #333;
    }
    .tag {
      color: #838383;
      display: inline-block;
      width: 180px;
      text-align: right;
      vertical-align: top;
      margin-right: 10px;
    }
  }
}
.rece_info,
.action_info {
  padding: 30px 5px;
}
.order_title {
  padding: 0px 20px;
  font-size: 18px;
  height: 48px;
  color: #97999d;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bor_bot_n {
  border-bottom: none;
}
.bor_top_n {
  border-top: none;
}
</style>